<template>
  <div>
    <div class="text-center">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="城市等级" prop="city">
          <el-select v-model="form.grade" placeholder="请选择活动区域">
            <el-option label="一线城市" value="一线城市"></el-option>
            <el-option label="二线城市" value="二线城市"></el-option>
            <el-option label="三线城市" value="三线城市"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select v-model="form.starting" placeholder="请选择活动区域">
            <el-option
              v-for="item in showdept"
              :key="item.city"
              :label="item.city"
              :value="item.city"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.payissuetime" style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择时间" v-model="form.payarrivetime" style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="订单类型" prop="city">
          <el-select v-model="form.type" placeholder="请选择活动区域">
            <el-option label="实时代叫车" :value="0"></el-option>
            <el-option label="实时自叫车" :value="1"></el-option>
            <el-option label="实时货运" :value="2"></el-option>
            <el-option label="预约代叫车" :value="3"></el-option>
            <el-option label="预约自叫车" :value="4"></el-option>
            <el-option label="预约货运" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div ref="chart" :style="{ width: '100%', height: '800px' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { velocity } from '@/api/orders/orderfrom';
import { citysel } from '@/api/cityRank/cityRank'

export default {
  name: 'BoxPlotChart',
  data() {
    return {
      form:{},
      showdept: [],
      chartInstance: null,
      chartOption: {
        title: {
          text: '订单平均响应时间箱线图'
        },
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            rotate: 45
          },
          name: '日期', // 添加日期说明
          nameLocation: 'end', // 标签位置
          nameTextStyle: {
            fontSize: 14, // 标签字体大小
            padding: [5, 0, 0, 0] // 标签位置调整
          }
        },
        yAxis: {
          type: 'value',
          name: '响应时间(单位：s)'
        },
        series: [{
          name: '订单平均响应时间',
          type: 'boxplot',
          data: [],
          itemStyle: {
            color: '#62c5bc',  // 箱体颜色
            borderColor: '#62c5bc'  // 边框颜色
          },
          boxWidth: [10, 30]  // 箱体宽度范围
        }, {
          name: '异常值',
          type: 'scatter',
          data: [],
          symbolSize: 8,
          itemStyle: {
            color: '#e06455'  // 异常值颜色
          }
        }]
      }
    };
  },
  mounted() {
    this.initChart();
    this.fetchData();
    this.getList1();
  },
  methods: {
    getList1() {
      citysel().then(res => {
        this.showdept = res.data
      })
    },
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      this.chartInstance.setOption(this.chartOption);
      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
    async fetchData() {
      try {
        const response = await velocity();
        if (response.code === 200) {
          const categories = response.data.map(item => {
            const date = new Date(item.formatteddate);
            return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
          });

          const boxPlotData = response.data.map(item => {
            const q1 = item.averagetime - 10000;
            const median = item.averagetime;
            const q3 = item.averagetime + 10000;
            return [item.mintime, q1, median, q3, item.maxtime];
          });

          const outliers = [[0, 250000], [1, 600000]]; // 示例异常值

          this.chartOption.xAxis.data = categories;
          this.chartOption.series[0].data = boxPlotData;
          this.chartOption.series[1].data = outliers;

          this.chartInstance.setOption(this.chartOption);
        } else {
          console.error('Error:', response.msg);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  }
};
</script>

<style>
</style>
